<template>
	<div class="large-screen_wrap">
		<div class="page-header">
			<img class="img-logo" src="../assets/images/largeScreen/img_logo.png" alt="" />

			<div class="data-time">
				<span>{{ weekDate }}</span>
				<span>{{ dateTime }}</span>
			</div>

			<div class="route-btn is_hover" @click="$router.push({ path: '/home' })"></div>
		</div>

		<div class="page-content">
			<div class="left-panel"><LeftPanel></LeftPanel></div>

			<div class="middle-panel"><MiddlePanel></MiddlePanel></div>

			<div class="right-panel"><RightPanel></RightPanel></div>
		</div>

		<div class="start-dialog" v-if="dialogVisible">
			<div :class="`left-item ${isStart ? 'is_start' : ''}`"></div>
			<div :class="`right-item ${isStart ? 'is_start' : ''}`"></div>

			<div class="start-btn" @click="btnStartClick()" v-if="!isStart"></div>
		</div>
	</div>
</template>

<script>
import LeftPanel from '../components/largeScreen/LeftPanel';
import MiddlePanel from '../components/largeScreen/MiddlePanel';
import RightPanel from '../components/largeScreen/RightPanel';

export default {
	components: {
		LeftPanel,
		MiddlePanel,
		RightPanel
	},
	data() {
		return {
			weekDate: '',
			dateTime: '',
			isStart: false,
			dialogVisible: false,
			leftData:[],
		};
	},
	mounted() {
		this.weekDate = this.getWeekDate();
		this.dateTime = this.formatDate('HH:MM', new Date());

		setInterval(() => {
			this.weekDate = this.getWeekDate();
			this.dateTime = this.formatDate('HH:MM', new Date());
		}, 1000 * 60);
	},
	methods: {
		/**
		 * 格式化日期
		 * @param fmt
		 * @param date
		 * @return {*}
		 */
		formatDate(fmt, date) {
			let ret;
			const opt = {
				'Y+': date.getFullYear().toString(), // 年
				'm+': (date.getMonth() + 1).toString(), // 月
				'd+': date.getDate().toString(), // 日
				'H+': date.getHours().toString(), // 时
				'M+': date.getMinutes().toString(), // 分
				'S+': date.getSeconds().toString() // 秒
				// 有其他格式化字符需求可以继续添加，必须转化成字符串
			};
			for (let k in opt) {
				ret = new RegExp('(' + k + ')').exec(fmt);
				if (ret) {
					fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'));
				}
			}
			return fmt;
		},

		/**
		 *获取当前星期几
		 */
		getWeekDate() {
			var now = new Date();
			var day = now.getDay();
			var weeks = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六');
			var week = weeks[day];
			return week;
		},

		btnStartClick() {
			this.isStart = true;

			setTimeout(() => {
				this.dialogVisible = false;
			}, 3000);
		}
	},

	beforeRouteEnter(to, from, next) {
		next(vm => {
			if (from.name) {
				vm.dialogVisible = false;
			}
		});
	}
};
</script>

<style lang="less">
.large-screen_wrap {
	width: 100%;
	height: 100%;
	position: relative;
	background-image: url('../assets/images/largeScreen/img_page.png');
	background-size: 100% 100%;

	> .page-header {
		width: 100%;
		height: 80px;
		background-image: url('../assets/images/largeScreen/img_navbar.png');
		background-size: 100% auto;
		background-position: center 20px;
		background-repeat: no-repeat;
		position: relative;

		> .img-logo {
			position: absolute;
			top: 14px;
			left: 43px;
		}

		> .data-time {
			position: absolute;
			right: 50px;
			top: 34px;
			font-size: 18px;
			color: #b7cdff;

			> span {
				margin-left: 12px;
			}
		}

		> .route-btn {
			position: absolute;
			width: 321px;
			height: 42px;
			top: 20px;
			left: 0;
			right: 0;
			margin: auto;
		}
	}

	> .page-content {
		width: 100%;
		height: calc(100% - 80px);

		> div {
			display: inline-block;
			vertical-align: top;
			position: relative;

			&.left-panel {
				width: 400px;
				height: 100%;
			}

			&.middle-panel {
				width: calc(100% - 400px - 400px);
				height: 100%;
			}

			&.right-panel {
				width: 400px;
				height: 100%;
			}
		}

		.panel-item-title {
			width: 100%;
			height: 25px;
			line-height: 25px;
			padding-left: 14px;
			font-size: 18px;
			color: #aee0ff;
			background-image: url('../assets/images/largeScreen/bg_panel_title.png');
			background-size: auto 100%;
			background-position: left center;
			background-repeat: no-repeat;
		}
	}

	> .start-dialog {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 99;

		> div {
			position: absolute;
			left: 0;
			top: 0;
			width: 50%;
			height: 100%;
			background-image: url('../assets/images/largeScreen/bg_start.png');
			background-size: auto 1080px;
			background-position: left center;
			transition: all 3s;

			&.right-item {
				left: unset;
				right: 0;
				background-position: right center;
			}

			&.start-btn {
				width: 184px;
				height: 200px;
				top: 290px;
				/*top: 0;*/
				right: 0;
				bottom: 0;
				margin: auto;
				background-image: url('../assets/images/largeScreen/btn_start.png');
				background-size: 100% 100%;
				cursor: pointer;
				transition: all 0.5s;

				&:hover {
					transform: scale(1.02, 1.02);
				}
			}

			&.is_start {
				width: 0;
			}
		}
	}
}
</style>
